<template>
  <div>
    <a-layout>
      <a-layout-sider
        v-model:collapsed="collapsed"
        breakpoint="lg"
        :collapsedWidth="20"
        collapsible
        :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }"
      >
        <a-menu
          v-model:selectedKeys="selectedKeys"
          theme="dark"
          mode="inline"
          @click="menuClick"
        >
          <a-menu-item v-for="item in cMenuItem" :key="item.menuItemId">
            <template #icon>
              <iconpark-icon :name="item.icon"></iconpark-icon>
            </template>
            {{ item.menuTitle }}
          </a-menu-item>
          <a-sub-menu
            v-for="item in cSubMenuItem"
            :key="item.menuItemId"
            @titleClick="submenu"
          >
            <template #icon>
              <iconpark-icon :name="item.icon"></iconpark-icon>
            </template>
            <template #title>{{ item.menuTitle }}</template>
            <!--   <a-menu-item>
              <template #icon>
                <iconpark-icon :name="item.icon"></iconpark-icon>
              </template>
              {{ item.menuTitle }}
            </a-menu-item> -->
            <a-menu-item-group
              v-for="items in cMenuItemGroup(item.menuItemId)"
              :key="items.menuItemGroupId"
            >
              <template #title>
                <iconpark-icon
                  :name="items.menuItemGroupIcon"
                  class="mr-1"
                ></iconpark-icon>
                {{ items.menuItemGroupTitle }}
              </template>
              <a-menu-item
                v-for="itemss in cMenuItemGroupItem(items.menuItemGroupId)"
                :key="itemss.menuItemGroupItemId"
              >
                <template #icon>
                  <iconpark-icon :name="itemss.menuItemGroupItemIcon"></iconpark-icon>
                </template>
                {{ itemss.menuItemGroupItemTitle }}
              </a-menu-item>
            </a-menu-item-group>
          </a-sub-menu>

          <a-menu-item key="manage">
            <template #icon>
              <iconpark-icon name="guanlihoutai"></iconpark-icon>
            </template>
            管理后台
          </a-menu-item>
        </a-menu>
      </a-layout-sider>

      <a-layout :class="!collapsed ? 'contentColl' : 'contentCall'">
        <router-view></router-view>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
import {
  defineComponent,
  ref,
  reactive,
  getCurrentInstance,
  onMounted,
  computed,
  onUpdated,
} from "vue";
import { message } from "ant-design-vue";
export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    // 监听滚动

    const menuData = reactive({
      menuItem: [],
      menuItemGroup: [],
      menuItemGroupItem: [],
    });
    const selectedKeys = ref([localStorage.getItem("menu")]);
    //计算属性
    const cMenuItem = computed(() => {
      return menuData.menuItem.filter((item) => !item.isSubMenu);
    });
    const cSubMenuItem = computed(() => {
      return menuData.menuItem.filter((item) => item.isSubMenu);
    });
    const cMenuItemGroup = computed(() => {
      return function (id) {
        return menuData.menuItemGroup.filter((item) => id === item.subMenuId);
      };
    });
    const cMenuItemGroupItem = computed(() => {
      return function (id) {
        return menuData.menuItemGroupItem.filter((item) => id === item.menuItemGroupId);
      };
    });

    onMounted(() => {
      selectedKeys.value[0] = localStorage.getItem("menu");
      proxy.$api.get("menuitem").then((res) => {
        if (res.error === 0) menuData.menuItem = res.message;
        else message.error(res.message);
      });

      proxy.$api.get("menuitemGroup").then((res) => {
        if (res.error === 0) menuData.menuItemGroup = res.message;
        else message.error(res.message);
      });

      proxy.$api.get("menuitemGroupItem").then((res) => {
        if (res.error === 0) menuData.menuItemGroupItem = res.message;
        else message.error(res.message);
      });
    });
    onUpdated(() => {
      selectedKeys.value[0] = localStorage.getItem("menu");
    });
    function menuClick(e) {
      localStorage.setItem("menu", e.key);
      selectedKeys.value[0] = e.key;
      if (e.key === "manage") {
        proxy.$router.push("/" + e.key);
      } else {
        proxy.$router.push("/home/" + e.key);
      }
    }
    function submenu() {}

    return {
      cMenuItem,
      cSubMenuItem,
      cMenuItemGroup,
      cMenuItemGroupItem,
      menuClick,
      submenu,
      selectedKeys: selectedKeys,
      collapsed: ref(false),
    };
  },
});
</script>
